<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员数量注册折线图</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../../static/plugins/elementui/index.css">
    <link rel="stylesheet" href="../../../static/plugins/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id="app">
    <el-input
            placeholder="输入天数不能小于7天或者大于15天"
            v-model="input"
            oninput ="value=value.replace(/[^\d]/g,'')"
            @input="lineChart"
            clearable>
    </el-input>
    <h2 v-if="input>=15">
        只能查询15天以前的预约折线图
    </h2>
    <h2 v-else-if="input<=7">
        只能查询7天或15天以前的预约折线图
    </h2>
    <h2 v-else>
        当前查询{{input}}以前的预约折线图
    </h2>
    <div id="main" style="width: 600px;height:400px;"></div>
</div>
</body>
<script src="../../../static/js/vue.js"></script>
<script src="../../../static/plugins/elementui/index.js"></script>
<script src="../../../static/js/axios-0.18.0.js"></script>
<script src="../../../static/js/echarts.min.js"></script>
<script>
    //基于准备好的dom,初始化echarts实例
    var a=null;
    var app=new Vue({
        el:"#app",
        data:{
            input:''
        },
        data() {
            return {
                input: ''
            }
        },methods:{
            lineChart(){
                // 使用刚指定的配置项和数据显示图表*/
                axios.get("/member/getMemberCount",{
                    params:{
                        'length':this.input
                    }
                }).then((res)=>{
                    console.log(res.data)
                    if (res.data.code=='-998'){
                        this.$message({
                            showClose: true,
                            message: '你无该权限!',
                            type: 'error'
                        });
                    }else if (res.data.code==null||res.data.code==''){
                        this.$nextTick(() =>{
                            echarts.init(document.getElementById("main")).setOption({
                                title:{
                                    text:'会员注册数量'
                                },tooltip:{},
                                legend:{
                                    data:['会员注册数量']
                                },xAxis:{
                                    data:res.data.months
                                },yAxis:{
                                    type:'value'
                                },series:[{
                                    name:'会员注册数量',
                                    type: 'line',
                                    data:res.data.orderCount
                                }]
                            })
                        })

                    }else{
                        this.$message({
                            showClose: true,
                            message: '显示失败!',
                            type: 'error'
                        });
                    }
                });
            }
        },created() {
            this.lineChart();
        },  mounted(){
            // 在通过mounted调用即可
            this.lineChart();
        }
    });

</script>
</html>